<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="/css/demo.css">
  <title>elements - button</title>
</head>
<body>

  <div class="snippet">
    <a class="button" href="#">Button</a>
  </div>

  <div class="snippet">
    <a class="button" href="#">Anchor</a>
    <button class="button">Button</button>
    <input class="button" type="submit" value="Submit input">
    <input class="button" type="reset" value="Reset input">
  </div>

  <div class="snippet">
    <a class="button is-small" href="#">Small</a>
    <a class="button is-medium" href="#">Medium</a>
    <a class="button is-large" href="#">Large</a>
  </div>

  <div class="snippet">
    <a class="button is-hovered" href="#">Hovered</a>
    <a class="button is-focused" href="#">Focused</a>
    <a class="button is-active" href="#">Active</a>
    <a class="button is-loading" href="#">Loading</a>
  </div>

  <div class="snippet">
    <a class="button is-static" href="#">Static</a>
  </div>

  <div class="snippet">
    <a class="button is-small" href="#">
      <span class="icon">
        <i class="fa fa-bold"></i>
      </span>
    </a>
    <a class="button" href="#">
      <span class="icon">
        <i class="fa fa-bold"></i>
      </span>
    </a>
    <a class="button is-medium" href="#">
      <span class="icon">
        <i class="fa fa-bold"></i>
      </span>
    </a>
    <a class="button is-large" href="#">
      <span class="icon">
        <i class="fa fa-bold"></i>
      </span>
    </a>
  </div>

  <div class="snippet">
    <a class="button is-large" href="#">
      <span class="icon">
        <i class="fa fa-bold"></i>
      </span>
    </a>
    <a class="button is-large" href="#">
      <span class="icon">
        <i class="fa fa-bold fa-lg"></i>
      </span>
    </a>
    <a class="button is-large" href="#">
      <span class="icon">
        <i class="fa fa-bold fa-2x"></i>
      </span>
    </a>

  </div>

  <div class="snippet">
    <div class="field is-grouped">
      <p class="control">
        <a class="button is-link">
          Save changes
        </a>
      </p>
      <p class="control">
        <a class="button">
          Cancel
        </a>
      </p>
      <p class="control">
        <a class="button is-danger">
          Delete post
        </a>
      </p>
    </div>
  </div>

  <div class="snippet">

    <div class="field has-addons">
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-left"></i>
          </span>
          <span>Left</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-center"></i>
          </span>
          <span>Center</span>
        </a>
      </p>
      <p class="control">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-right"></i>
          </span>
          <span>Right</span>
        </a>
      </p>
    </div>
  </div>


</body>
</html>
